<template>
    <div class="addOrEditCardContent">
        <div class="title">Ngân hàng</div>
        <p class="bankErrorTip" v-if="bankError">
            Vui lòng chọn ngân hàng
        </p>
        <ul class="lightBankList">
            <li v-for="(bank, index) in lightBankList" :key="index" class="lightBankItem"
                :class="{ 'selectedLightBank': bank.bkcode == selectedBank.bkcode }"
                @click="clickLightBankHandler(bank)">
                {{ bank.bkname }}
            </li>
        </ul>
        <div class="selectOtherBankArea" @click="showBottomDialog">
            <p class="otherBankTitle">
                {{ otherBankNameShowText ? otherBankNameShowText : 'Ngân hàng khác' }}
            </p>
            <img src="@/assets/jiantou_right.png" alt="">
        </div>
        <div class="bankCardNumArea">
            <div class="inputAndError">
                <div class="cardNumInput">
                    <div class="inputName">Tài khoản</div>
                    <div :style="firstNumBorderStyle" class="inputNum">
                        <input v-model="firstNum" placeholder="Xin nhập" @input="firstNumChangeHandler"
                            @focus="firstNumFocus" @blur="firstNumBlur" />
                    </div>
                </div>
                <p class="errorTip" v-if="firstNumStatus == 3">Vui lòng kiểm tra tài khoản ngân hàng</p>
            </div>
            <div class="inputAndError">
                <div class="cardNumInput">
                    <div class="inputName">Nhập lại số tài khoản ngân hàng</div>
                    <div class="inputNum" :style="secondNumBorderStyle">
                        <input v-model="secondNum" placeholder="Xin nhập" @input="secondNumChangeHandler"
                            @focus="secondNumFocus" @blur="secondNumBlur" />
                    </div>
                </div>
                <p class="errorTip" v-if="secondNumStatus == 3">Số tài khoản được nhập hai lần không khớp</p>
            </div>
        </div>

        <BankListDialog :visible='visible' :changeDialogStatus='changeDialogStatus' :otherBankList='otherBankList'
            @clickLightBankHandler="clickLightBankHandler" :selectedBank="selectedBank" />


    </div>

</template>

<script setup lang='ts'>
import api, { type BankInfoModel } from '@/api';
import { getItem } from '@/utils/token-utils';
import { ref, computed, onMounted, watch, defineProps, defineEmits } from 'vue'
import BankListDialog from '@/components/bankListDialog.vue'

let props = defineProps(['needInfo', 'firstNumStatus', 'secondNumStatus'])
let emits = defineEmits(['getBankCardInfo'])


let lightBankList = ref<BankInfoModel[]>([])
let otherBankList = ref<BankInfoModel[]>([])

let selectedBank = ref<BankInfoModel>({
    autoPopulation: '',
    bankProminenceIndex: '',
    bkcode: '',
    bkname: '',
    hotFlag: '',
    sort: '',
})

let bankError = ref(false)


let firstNum = ref('')
let secondNum = ref('')

let visible = ref(false)

let firstNumStatus = ref(1)

let secondNumStatus = ref(1)

let searchStatus = ref(1)

let searchFocus = () => {
    searchStatus.value = 2;
}
let searchBlur = () => {
    searchStatus.value = 1;
}
let firstNumFocus = () => {
    firstNumStatus.value = 2;
}
let firstNumBlur = () => {
    firstNumStatus.value = 1;
}

let secondNumFocus = () => {
    secondNumStatus.value = 2;
}
let secondNumBlur = () => {
    secondNumStatus.value = 1;
}

let searchAreaBorderStyle = computed(() => {
    return {
        borderColor: searchStatus.value == 1 ? 'transparent' : '#009959',
    }
})
let firstNumBorderStyle = computed(() => {
    return {
        borderColor: firstNumStatus.value == 1 ? 'transparent' : (firstNumStatus.value == 2 ? '#009959' : '#E54922'),
    }
})
let secondNumBorderStyle = computed(() => {
    return {
        borderColor: secondNumStatus.value == 1 ? 'transparent' : (secondNumStatus.value == 2 ? '#009959' : '#E54922'),
    };
})

let otherBankNameShowText = computed(() => {

    let inLightBankList = lightBankList.value.find((bank) => {
        return bank.bkcode == selectedBank.value.bkcode
    })

    return inLightBankList ? 'Ngân hàng khác' : selectedBank.value.bkname

})

const showBottomDialog = () => {
    visible.value = true
}
const changeDialogStatus = (isShow: boolean) => {
    visible.value = isShow
}

const clickLightBankHandler = (bank: BankInfoModel) => {
    selectedBank.value = bank
}


const getBankList = async () => {
    try {
        let bankListRes = (await api.gteBankInfoList({
            uuid: getItem('uuid'),
            token: getItem('token')
        })).data
        if (bankListRes.code == 0) {
            lightBankList.value = bankListRes.data.filter((bank: BankInfoModel) => {
                return bank.bankProminenceIndex == '1'
            })
            otherBankList.value = bankListRes.data.filter((bank: BankInfoModel) => {
                return bank.bankProminenceIndex == '0'
            })
        }

    } catch (error) {
        console.log(error);

    }
}


// The event triggered when the bank card number is entered
const firstNumChangeHandler = async () => {

    firstNum.value = firstNum.value.replace(/\D/g, '')

}
// The event that is triggered when the bank card number is confirmed
const secondNumChangeHandler = async () => {

    secondNum.value = secondNum.value.replace(/\D/g, '')

    // if (phoneNum.value.length > 10) {
    //     phoneNum.value = phoneNum.value.slice(0, 10)
    // }

}




// Listen for changes at selected banks to see if you need a phone number
watch(() => selectedBank.value, (newVal) => {
    bankError.value=false
    if (newVal.autoPopulation && newVal.autoPopulation == '0') {
        firstNum.value = (getItem('cellular') as string)
        secondNum.value = (getItem('cellular') as string)
    } else {
        firstNum.value = ''
        secondNum.value = ''
    }
})


// Listen for changes in the parent component's data flag
watch(() => props.needInfo, (newVal) => {
    if (newVal) {
        let isError = ref(false)
        if (!firstNum.value) {
            firstNumStatus.value = 3
            isError.value=true
        }
        if (!secondNum.value) {
            secondNumStatus.value = 3
            isError.value=true
        }
        if (secondNum.value != firstNum.value) {
            secondNumStatus.value = 3
            isError.value=true
        }
        if (!selectedBank.value.bkcode) {
            bankError.value=true
            isError.value=true
        }
        console.log(firstNum.value == secondNum.value);
        
        
        // if (firstNum.value && secondNum.value && firstNum.value == secondNum.value&&selectedBank.value.bkcode) {
            emits('getBankCardInfo', {
                accountNo: firstNum.value,
                secondAccountNo: secondNum.value,
                bankCode: selectedBank.value.bkcode,
                isError:isError.value
            })
        // }

    }
})

watch([() => props.firstNumStatus, () => props.secondNumStatus], ([newFirstNumStatus, newSecondNumStatus]) => {
    firstNumStatus.value = newFirstNumStatus
    secondNumStatus.value = newSecondNumStatus
},{immediate:true})

// watch([()=>firstNum.value,()=>secondNum.value,()=>selectedBank.value,()=>props.needInfo],([newFirstNum,newSecondNum,newSelectedBank,newNeed])=>{
//    
// })

onMounted(() => {
    getBankList()
})



</script>

<style lang="less" scoped>
.addOrEditCardContent {
    width: 100%;
    padding: 0 .8rem;

    .bankErrorTip {
        // font-family: SF Pro, SF Pro;
        font-weight: 400;
        font-size: .7rem;
        color: #E54922;
        line-height: 1.1rem;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .title {
        margin-bottom: .8rem;
        font-family: SF Pro, SF Pro;
        font-weight: 600;
        font-size: 18px;
        color: #292B33;
        line-height: 26px;
        text-align: left;
        font-style: normal;
        text-transform: none;
    }

    .lightBankList {
        width: 100%;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;



        .lightBankItem {
            width: 49%;
            padding: 12px;
            border-radius: .4rem;
            margin-bottom: .4rem;
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;

            border: 1px solid transparent;
            background-color: #F7F7FA;
            font-family: SF Pro, SF Pro;
            font-weight: 400;
            font-size: .8rem;
            color: #626673;
            line-height: 1.2rem;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .selectedLightBank {
            background-color: #fff;
            color: #009959;
            border: 1px solid #009959;

        }
    }

    .selectOtherBankArea {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: .8rem 0;
        padding-top: 8px;
        border-bottom: 1px solid #DCDCE0;

        .otherBankTitle {
            width: 80%;
            text-wrap: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
            font-family: SF Pro, SF Pro;
            font-weight: 600;
            font-size: .8rem;
            color: #626673;
            line-height: 1.2rem;
            text-align: left;
            font-style: normal;
            text-transform: none;

        }

        &>img {
            display: block;
            width: .8rem;
            height: .8rem;

        }
    }

    .bankCardNumArea {
        margin-top: .8rem;

        .inputAndError {
            margin-bottom: .6rem;

            .cardNumInput {

                .inputName {
                    /* font-family: SF Pro, SF Pro; */
                    font-weight: 400;
                    font-size: .8rem;
                    color: #626673;
                    line-height: 1.2rem;
                    text-align: left;
                    font-style: normal;
                    text-transform: none;
                    margin-bottom: .4rem;
                }

                .inputNum {
                    width: 100%;
                    background-color: #F7F7FA;
                    border-radius: .4rem;
                    padding: .6rem .8rem;
                    border: 1px solid transparent;
                }


            }

            .errorTip {
                // font-family: SF Pro, SF Pro;
                font-weight: 400;
                font-size: .7rem;
                color: #E54922;
                line-height: 1.1rem;
                text-align: left;
                font-style: normal;
                text-transform: none;
            }
        }


    }
}

input {
    border: none;
    background: transparent;
    outline: none;

    font-family: SF Pro, SF Pro;
    font-weight: 400;
    font-size: .8rem;
    color: #292B33;
    line-height: 1.2rem;
    text-align: left;
    font-style: normal;
    text-transform: none;
}

input::placeholder {
    color: #C2C4CC;
}

::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #C2C4CC;
}

:-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #C2C4CC;
    opacity: 1;
    /* Firefox needs this to show placeholder text in older versions */
}

::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #C2C4CC;
    opacity: 1;
    /* Firefox needs this to show placeholder text in older versions */
}

:-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #C2C4CC;
}
</style>